<template>
    <div class="home-page">
      <!-- 轮播图区域 -->
      <el-carousel height="46vw" indicator-position="none" class="banner-carousel">
        <el-carousel-item>
          <img src="https://dummyimage.com/750x350/ff6b6b/fff&text=庆祝新中国成立75周年" class="banner-img" />
          <div class="carousel-indicators">
            <span v-for="i in 15" :key="i" 
                  :class="['indicator-dot', { active: i === 1 }]">
            </span>
          </div>
        </el-carousel-item>
      </el-carousel>
  
      <!-- 德育模块 -->
      <div class="section">
        <div class="section-header">
          <div class="title-wrapper">
            <span class="section-title">德育</span>
            <span class="title-decoration">///</span>
          </div>
          <el-icon class="more-icon"><ArrowRight /></el-icon>
        </div>
        <div class="moral-grid">
          <div v-for="item in moralItems" :key="item.text" class="grid-item">
            <div class="item-content">
              <span class="item-text">{{ item.text }}</span>
              <img :src="item.icon" class="item-icon" :alt="item.text"/>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 课程教学模块 -->
      <div class="section">
        <div class="section-header">
          <div class="title-wrapper">
            <span class="section-title">课程教学</span>
            <span class="title-decoration">///</span>
          </div>
          <el-icon class="more-icon"><ArrowRight /></el-icon>
        </div>
        <div class="course-grid">
          <div v-for="item in courseItems" :key="item.text" class="course-item"
               :style="{ background: item.bgColor }">
            <div class="course-content">
              <span class="course-text">{{ item.text }}</span>
              <img :src="item.img" class="course-img" :alt="item.text"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ArrowRight } from '@element-plus/icons-vue'
  
  const moralItems = [
    { text: '党史学习', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=党' },
    { text: '爱国主义', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=爱' },
    { text: '宪法法治', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=法' },
    { text: '品德教育', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=德' },
    { text: '思政课程', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=思' },
    { text: '优秀传统文化', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=文' },
    { text: '生命与安全', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=安' },
    { text: '心理健康', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=心' },
    { text: '生态文明', icon: 'https://dummyimage.com/40x40/ff6b6b/fff&text=生' }
  ]
  
  const courseItems = [
    { 
      text: '小学课程', 
      img: 'https://dummyimage.com/120x120/90EE90/fff&text=小学',
      bgColor: '#E8F5E9'
    },
    { 
      text: '初中课程', 
      img: 'https://dummyimage.com/120x120/87CEEB/fff&text=初中',
      bgColor: '#E3F2FD'
    },
    { 
      text: '高中课程', 
      img: 'https://dummyimage.com/120x120/FFA07A/fff&text=高中',
      bgColor: '#FFF3E0'
    }
  ]
  </script>
  
  <style scoped>
  .home-page {
    background: #f5f7fa;
  }
  
  .banner-carousel {
    position: relative;
  }
  
  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .carousel-indicators {
    position: absolute;
    bottom: 2vw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1vw;
  }
  
  .indicator-dot {
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
  }
  
  .indicator-dot.active {
    background: #fff;
    width: 3vw;
    border-radius: 1vw;
  }
  
  .section {
    margin: 4vw;
    background: #fff;
    border-radius: 3vw;
    padding: 4vw;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4vw;
  }
  
  .title-wrapper {
    display: flex;
    align-items: center;
    gap: 2vw;
  }
  
  .section-title {
    font-size: 4.5vw;
    font-weight: 500;
    color: #333;
  }
  
  .title-decoration {
    color: #8395a7;
    font-size: 3vw;
    transform: rotate(-15deg);
  }
  
  .more-icon {
    color: #8395a7;
    font-size: 4vw;
  }
  
  .moral-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
    background: #FFF5F5;
    border-radius: 2vw;
    padding: 3vw;
  }
  
  .grid-item {
    background: #fff;
    border-radius: 2vw;
    padding: 3vw;
  }
  
  .item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .item-text {
    font-size: 3.2vw;
    color: #333;
  }
  
  .item-icon {
    width: 8vw;
    height: 8vw;
    object-fit: contain;
  }
  
  .course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
  }
  
  .course-item {
    border-radius: 2vw;
    padding: 3vw;
    aspect-ratio: 1;
  }
  
  .course-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .course-text {
    font-size: 3.2vw;
    color: #333;
  }
  
  .course-img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  :deep(.el-carousel__container) {
    border-radius: 0;
  }
  </style>